<script setup>
import { computed, onMounted } from 'vue';
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
import MyBreadcrumb from '../../../components/MyBreadcrumb/index.vue';
import MyMagnifyingGlass from '../../../components/MyMagnifyingGlass/index.vue';
// import MySortBtn from '../../../components/MySortBtn/index.vue';
import MyBanner from '../../../components/MyBanner/index.vue';
import { debounce } from 'lodash';
const store = useStore();
const route = useRoute();
const num = ref(1);
const index = ref(0);
const price = ref(null);
const oldPrice = ref(null);
const imgName = ref(null);
const btnName = ref(null);
const showSite = ref(null);
const arr = ref([]);

const value = ref([]);
// 获取商品详情
store.dispatch('goods/updateGoodsDetail', { id: route.params.id });
const productDetail = computed(() => store.state.goods.goodsDetail);
// 获取商品推荐
store.dispatch('goods/updateGoodsRelevant', { id: route.params.id, limit: 20 });
const goodsRelevant = computed(() => store.state.goods.goodsRelevant);
// 24小时热销
store.dispatch('goods/updateGoodsHot', { id: route.params.id, limit: 4, type: 1 });
const goodsHot1 = computed(() => store.state.goods.goodsHot1);
// 周榜热销
store.dispatch('goods/updateGoodsHot', { id: route.params.id, limit: 4, type: 2 });
const goodsHot2 = computed(() => store.state.goods.goodsHot2);
// 面包屑
const breadcrumb = computed(() => [
  {
    path: '/home',
    breadcrumbName: '首页',
  },
  {
    path: `/category/${productDetail.value.categories[1]?.id}`,
    breadcrumbName: productDetail.value.categories[1]?.name,
  },
  {
    path: `/category/sub/${productDetail.value.categories[0]?.id}`,
    breadcrumbName: productDetail.value.categories[0]?.name,
  },
  {
    path: `/product/${productDetail.value.id}`,
    breadcrumbName: productDetail.value.name,
  },
]);
// 点击选择框
function onSelect() {
  showSite.value = !showSite.value;
  // 获取配送地址
  store.dispatch('goods/updateArea');
  // console.log('运行');
};
const area = computed(() => store.state.goods.area);
// 选择配送地址

// 选择地址
let SelectSite = ref('');
// 默认地址
let defaultSite = ref('北京 北京市 东城区');
function onSelectItem(id, name) {
  const a = area.value.find((item) => item.code == id).areaList;
  store.commit('goods/SET_AREA', a);
  SelectSite.value = SelectSite.value + ' ' + name;
  if (!area.value) {
    showSite.value = false;
    defaultSite.value = SelectSite.value;
    SelectSite.value = '';
  }
}


// 鼠标进入图片详情
function onMouseEnter(i) {
  index.value = i;
}


const activeName = ref('first');

const handleClick = (tab, event) => {
  console.log(tab, event);
};

// 选择规格
function onImgClick(name) {
  if (imgName.value === name) {
    imgName.value = null;
  } else {
    imgName.value = name;
  }
}

function onBtnClick(name) {
  if (btnName.value === name) {
    btnName.value = null;
  } else {
    btnName.value = name;
  }
}

</script>

<template>
  <my-breadcrumb :breadcrumb="breadcrumb" />
  <!-- <my-sort-btn v-model:value="sort">
    价格排序
  </my-sort-btn> -->
  <div class="goods-container">

    <!-- 物品详情  -->
    <div class="goods-details-warp">
      <div class="mian-img">
        <my-magnifying-glass :mianImages="productDetail.mainPictures[index]" />
        <div class="data">
          <div class="data-item">
            <span>销量人气</span>
            <span>200+</span>
            <span>
              <el-icon class="icon"><Flag /></el-icon>
              销量人气
            </span>
          </div>
          <div class="line"></div>
          <div class="data-item">
            <span>商品评价</span>
            <span>400+</span>
            <span>
              <el-icon class="icon"><Comment /></el-icon>
              查看评价
            </span>
          </div>
          <div class="line"></div>
          <div class="data-item">
            <span>收藏人气</span>
            <span>600+</span>
            <span>
              <el-icon class="icon"><StarFilled /></el-icon>
              收藏商品
            </span>
          </div>
          <div class="line"></div>
          <div class="data-item">
            <span>品牌信息</span>
            <span>苏宁电器</span>
            <span>
              <el-icon class="icon"><HelpFilled /></el-icon>
              品牌主页
            </span>
          </div>
        </div>
      </div>
      <div>
        <div
          v-for="(item, i) in productDetail.mainPictures"
          :key="i"
          :class="{
            itemImg: true,
            active: index === i,
          }"
          @mouseenter="onMouseEnter(i)"
        >
          <img :src="item">
        </div>
      </div>
      <div class="goods-details-content">
        <h3>{{ productDetail.name }}</h3>
        <div class="desc">{{ productDetail.desc }}</div>
        <div class="price">
          <span>¥{{ price ? price : productDetail.price }}</span>
          <s>¥{{ oldPrice ? oldPrice : productDetail.oldPrice }}</s>
        </div>
        <div class="deploy-warp">
          <div class="promotion">
            <span>促销</span>
            <span>12月好物放送，App领券购买直降120元</span>
          </div>
          <div class="promotion promotion-box">
            <span>配送</span>
            <span>至</span>
            <div class="example-block">
              <div
                class="site"
                @click="onSelect"
                :class="{
                  siteActive: showSite
                }"
              >
                {{ defaultSite }}
              </div>
              <div class="site-box" v-if="showSite">
                <div
                  class="site-item"
                  v-for="item in area"
                  :key="item.code"
                  @click="onSelectItem(item.code, item.name)"
                >
                  {{ item.name }}
                </div>
              </div>
            </div>
          </div>
          <div class="serve">
            <span>服务</span>
            <span class="dot"></span>
            <span>无忧无虑</span>
            <span class="dot"></span>
            <span>快速退款</span>
            <span class="dot"></span>
            <span>免费包邮</span>
            <span>了解详情</span>
          </div>
        </div>
        <div
          class="specs"
          v-for="(item) in productDetail.specs"
          :key="item.name"
        >
          <span>{{ item.name }}</span>

          <div
            class="specs-img"
            v-for="str in item.values"
            :key="str.name"
            :class="{
              specsImg: true,
            }"
          >
            <div
              v-show="str.picture"
              :class="{
                img: true,
                aa: imgName === str.name,
              }"
              @click="onImgClick(str.name)"
            >
              <img :src="str.picture" :title="str.name">
            </div>
            <div
              :class="{
                specsImgItem: true,
                active: btnName === str.name,
                dashed: false
              }"
              v-show="!str.picture"
              @click="onBtnClick(str.name)"
            >
              {{ str.name }}
            </div>
          </div>
        </div>
        <div class="num">
          <span>数量</span>
          <el-input-number v-model="num" :min="1" :max="100" />
        </div>
        <button class="goods-details-btn">加入购物车</button>
      </div>
    </div>

    <!-- 轮播图 -->
    <div class="slideshow">
      <div class="slideshow-tilte" >同类商品推荐</div>
      <el-carousel
        height="350px"
        trigger="click"
        arrow="always"
        :autoplay="false"
      >
        <el-carousel-item
          v-for="item in 4"
          :key="item"
          class="slideshow-content"
        >
          <div
            class="item"
            v-for="str in goodsRelevant.slice((item - 1) * 4, item * 4)"
            :key="str.id"
          >
            <div class="goods-img-warp">
              <img :src="str.picture" alt="">
            </div>
            <div class="goods-name">{{ str.name }}</div>
            <div class="goods-price">¥{{ str.price }}</div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 主要内容 -->
    <div class="goods-details-main">
      <div class="main-left">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="商品详情" name="first" class="goods-particulars">
            <div class="goods-particulars-info">
              <div class="goods-particulars-info-item"
                   v-for="item in productDetail.details?.properties"
                   :key="item.name"
              >
                <div>{{ item.name }}</div>
                <div>{{ item.value }}</div>
              </div>
            </div>
            <div class="goods-particulars-img" v-for="(item, i) in productDetail.details?.pictures" :key="i">
              <img :src="item" alt="">
            </div>
          </el-tab-pane>
          <el-tab-pane label="商品评价" name="second">

          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="main-right">
        <div class="hour-hot">24小时热销榜</div>

        <div
          class="item"
          v-for="str in goodsHot1"
          :key="str.id"
        >
          <div class="goods-img-warp">
            <img :src="str.picture">
          </div>
          <div class="goods-name">{{ str.name }}</div>
          <div class="goods-price">¥{{ str.price }}</div>
        </div>

        <div class="hour-hot">周热销榜</div>

        <div
          class="item"
          v-for="str in goodsHot2"
          :key="str.id"
        >
          <div class="goods-img-warp">
            <img :src="str.picture" alt="">
          </div>
          <div class="goods-name">{{ str.name }}</div>
          <div class="goods-price">¥{{ str.price }}</div>
        </div>

      </div>
    </div>
  </div>
</template>

<style scope lang="scss">
.active {
  outline: 1px solid #5bb79b;
}

.dashed {
  outline: 1px dashed #efefef;
  color: #efefef;
}
.goods-container {
  background-color: #f5f5f4;
  width: 100%;
  min-width: 1240px;


  .goods-details-warp {
    width: 1240px;
    margin: 0 auto;
    background-color: #fff;
    display: flex;
    padding: 30px;

    .mian-img {
      width: 400px;
      // height: 400px;

      img {
        width: 100%;
        height: 400px;
        object-fit: cover;
      }

      .data {
        display: flex;
        padding: 30px 16px;
        justify-content: space-between;
        align-items: center;

        .data-item {
          display: flex;
          flex-direction: column;
          text-align: center;
          font-size: 14px;

          span:nth-child(1) {
            color: #999;
          }

          span:nth-child(2) {
            color: #bf4e49;
            margin: 4px 0;
          }

          span:nth-child(3) {
            color: #6b6c6b;

            &:hover {
              color: #5bb79c;
              cursor: pointer;
            }
          }
        }

        .line {
          width: 1px;
          height: 60px;
          background-color: #e0e0e0;
        }
        .icon {
          // vertical-align: middle;
          color: #5bb89d;
        }
      }
    }

    .itemImg {
      width: 68px;
      height: 68px;
      margin: 0 30px 8px 16px;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      &.active {
        border: 2px solid #5bb79b;
        cursor: pointer;
      }
    }


    .goods-details-content {

      h3 {
        margin: 0;
        padding: 0;
        font-size: 22px;
        font-weight: 400;
      }

      .desc {
        margin-top: 10px;
        color: #9f9e9e;
        font-size: 14px;
      }

      .price {
        margin-top: 10px;

        >span {
          font-size: 20px;
          color: #bf4e48;
          margin-right: 16px;
        }

        s {
          color: #9a9999;

        }
      }

      .deploy-warp {
        width: 500px;
        height: 150px;
        background-color: #f6f5f5;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding-left: 8px;
        margin-top: 10px;

        .promotion {

          >span:nth-child(1) {
            color: #999999;
            font-size: 14px;
            margin-right: 24px;
          }

          >span:nth-child(2) {
            color: #666666;
            font-size: 14px;
          }

          .example-block {
            margin-left: 4px;
            position: relative;

            .site {
              padding: 4px 8px;
              border: 1px solid #ccc;
              font-size: 12px;
              color: #6b6b6b;
              cursor: pointer;

              &.siteActive {
                background-color: #fff;
              }
            }

            .site-box {
              position: absolute;
              width: 600px;
              background-color: #fff;
              outline: 1px solid #ccc;
              z-index: 99;
              display: grid;
              grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
              padding: 10px;

              .site-item {
                padding: 8px 0;
                font-size: 14px;
                text-align: center;
                color: #666666;
                cursor: pointer;

                &:hover {
                  background-color: #f5f5f5;
                }
              }
            }

          }
        }

        .promotion-box {
          display: flex;
          align-items: center;

        }
        .select {
          margin-left: 4px;
          width: 180px;


        }

        .serve {
          display: flex;
          align-items: center;
          span:nth-last-child(1){
            color: #5bb79b;
            font-size: 14px;
          }
          span:nth-child(2n+1) {
            color: #666666;
            margin-right: 8px;
            font-size: 14px;
          }

          span:nth-child(1) {
            color: #999999;
            font-size: 14px;
            margin-right: 24px;
          }
          .dot {
            display: inline-block;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            margin-right: 4px;
            background-color: #5bb79b;
            line-height: 5px;
          }
        }
      }

      .specs {
        margin-top: 20px;
        display: flex;


        >span {
          color: #99999a;
          font-size: 14px;
          margin-right: 16px;
        }

        .specsImg {
          margin-right: 8px;
          cursor: pointer;

          .specsImgItem {
            font-size: 12px;
            padding: 4px 16px;
            color: #737373;
            outline: 1px solid #ccc;
            &.active {
              outline: 1px solid #5bb79b;
            }

            &.dashed {
              outline: 1px dashed #efefef;
              color: #efefef;
            }
          }

          // &.active {
          //   outline: 1px solid #5bb79b;
          // }

          // &.dashed {
          //   outline: 1px dashed #efefef;
          //   color: #efefef;
          // }

          .img {
            width: 50px;
            height: 50px;
            outline: 1px solid #ccc;


            img {
              object-fit: cover;
              width: 100%;
              height: 100%;
            }
            &.aa{
              outline: 1px solid #5bb79b;
            }

            &.dashed {
              outline: 1px dashed #efefef;
              color: #efefef;
            }
          }

        }
      }

      .num {

        margin-top: 10px;

        >span {
          color: #99999a;
          font-size: 14px;
          margin-right: 16px;
        }
      }

      .goods-details-btn {
        margin-top: 20px;
        width: 185px;
        height: 50px;
        color: #fff;
        background-color: #5bb79b;
        border: none;
        border-radius: 4px;
        font-size: 18px;

        &:hover {
          cursor: pointer;
        }
      }
    }

  }

  .slideshow {
    // overflow: hidden;
    width: 1240px;
    margin: 0 auto;
    background-color: #fff;
    margin-top: 20px;
    padding: 30px;

    .slideshow-tilte {
      margin: 20px 0;
      font-size: 24px;
      color: #333333;
    }
    .slideshow-content {
      display: flex;
      width: 100%;
      flex-wrap: wrap;
      background-color: #fff;
      justify-content: space-around;

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 240px;
        padding: 20px 30px;
        text-align: center;
        justify-content: center;
        margin: 0 14px;

        .goods-img-warp{
          width: 230px;
          height: 230px;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        .goods-name {
          @include hide(1);
          color: #686869;
          margin: 16px 0;

        }

        .goods-price {
          font-size: 18px;
          color: #bf4e49;
        }
      }
    }

  }

  .goods-details-main {
    width: 1240px;
    margin: 30px auto;
    display: flex;


    .main-left {
      width: 940px;
      background-color: #fff;

      .goods-particulars-info {
        padding: 30px;
        display: flex;
        flex-wrap: wrap;

        .goods-particulars-info-item {
          width: 430px;
          display: flex;
          // justify-content: space-between;
          margin: 0 10px 10px 0;

          div:nth-child(1) {
            width: 100px;
            color: #999;
            font-size: 14px;
          }
          div:nth-child(2) {
            flex: 1;
            color: #666;
            font-size: 14px;
          }
        }
      }

      .goods-particulars-img {
        width: 860px;
        height: 230px;
        padding-left: 30px;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }

    .main-right {
      width: 280px;
      margin-left: 20px;


      .hour-hot {
        width: 100%;
        height: 70px;
        padding-left: 25px;
        margin-bottom: 10px;
        color: #fff;
        background-color: #d26a43;
        line-height: 70px;
      }

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 20px 30px;
        text-align: center;
        justify-content: center;
        background-color: #fff;
        margin-bottom: 10px;


        .goods-img-warp{
          width: 200px;
          height: 200px;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        .goods-name {
          @include hide(1);
          color: #686869;
          margin: 16px 0;

        }

        .goods-price {
          font-size: 18px;
          color: #bf4e49;
        }
      }

    }
  }
}
 .el-input__wrapper {
  background-color: #f6f5f5;
 }

.el-carousel__button {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #5bb79c;
}
.el-tabs__item {
  height: 80px;
  line-height: 80px;
  font-size: 20px;
  color: #333333;
  font-weight: 400;


  &.is-active {
    color: #333;
  }

  &:hover {
    color: #333;
  }
}
.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  outline: 1px solid #f5f5f5;
  padding: 0 30px;
}
.el-tabs--top .el-tabs__item.is-top:last-child {
  padding: 0 30px;
}

</style>
